<template>
  <div class="box">
    <div class="left">
      <div v-for="(item,index) in papers">
        <el-descriptions :title="item.paperName">
          <el-descriptions-item label="发布用户">{{ item.name }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ item.startDate }}</el-descriptions-item>
          <el-descriptions-item label="截止时间">{{ item.endDate }}</el-descriptions-item>
          <el-descriptions-item label="题数">
            <el-tag size="small">{{ item.problemNum }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="已作答">{{ item.frequency }}人</el-descriptions-item>
          <el-descriptions-item label="操作">
            <el-button type="primary" style="height: 21px;font-size: 10px;padding: 3px" @click="jumpPaperStu(item)">
              答题
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
        <hr/>
      </div>
    </div>
    <div class="right">
      <el-button type="primary" style="width: 200px" icon="el-icon-edit" @click="jumpPaperTch()">发布试卷</el-button>
      <div class="hotPaper">
        <i class="el-icon-s-data" style="margin-top: 10px" >热门试卷</i>
        <hr style="margin: 5px;background-color: #888888; height:1px; border:none">
        <div v-for="(item,index) in hotPaper"
             style="display: flex;flex-direction: column; align-items: flex-start;margin-left: 5px;margin-top: 10px">
          <div style="display: flex;flex-direction: row;">
            <p class="right-title" >{{ item.paperName }}</p>
            <el-tag size="mini" style="margin-left: 5px">已答：{{item.frequency}}</el-tag>
          </div>
          <el-button type="text" @click="jumpPaperStu(item.id)" style="height: 21px;font-size: 10px;padding: 3px">答题</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Papers",
  data() {
    return {
      user: this.$sessionGet(),
      papers: [],
      hotPaper:[]
    }
  },
  methods: {
    getNowDate() {
      var myDate = new Date;
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      var date = myDate.getDate(); //获取当前日
      var hours = myDate.getHours(); //获取当前小时
      var minutes = myDate.getMinutes(); //获取当前分钟
      var seconds = myDate.getSeconds(); //获取当前秒
      var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
      return now;
    },
    jumpPaperStu(item) {
      if (this.user.level == 1) {
        alert("教师用户无权限");
        return
      }

      let timesNow = Date.parse(this.getNowDate());
      let timesStart = Date.parse(item.startDate);
      console.log(timesNow)
      console.log(timesStart)
      if (timesNow < timesStart){
        alert("未到习题开放时间");
        return;
      }
      this.$router.push({
        path: '/paperStu',
        query: {
          paperId: item.id
        }
      })
    },
    jumpPaperTch() {
      if (this.user.level == 2) {
        alert("学生用户无权限");
        return
      }
      this.$router.push("/paperTch")
    },
    getPapers() {
      this.$axios.get("/paper/getPapersAndUserByPaperId")
          .then(resp => {
            this.papers = resp.data.data;
            console.log(resp)
          })
          .catch(error => {
            console.log(error)
          })
    },
    getHotPaper(){
      this.$axios.get("/paper/hotPaper")
          .then(resp => {
            this.hotPaper = resp.data.data;
            console.log(resp)
          })
          .catch(error => {
            console.log(error)
          })
    }

  },
  created() {
    this.getPapers();
    this.getHotPaper();
  }
}
</script>

<style scoped>

.hotPaper{
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 15px;
}
.right {
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 30px;
  width: 400px;
  height: 400px;
  background: #f1f5f8;
}

.box {
  width: 100%;
  border-radius: 30px;
  display: flex;
  justify-content: center;
}

.left {
  background-color: #fff;
  padding: 20px;
  margin: 20px;
  text-align: left;
  border-radius: 20px;
  width: 2500px;
}
</style>